import React, { useState } from "react";
import { useSearchParams } from "react-router-dom";
import { Row, Col, Input, Select, Button } from "antd";
import { ListRawState } from "../listManage";
import axios from 'axios'
const Home: React.FC = () => {
  const [editItem, setEditItem] = useState<ListRawState>({
    id: "",
    nickname: "",
    tel: 0,
    address: "",
    sex: "",
    type: "",
  });
  const handleAdd = async () => {
    const resp = await axios.post('/api/list', editItem)
    console.log(resp.data)
  }
  return (
    <div>
      <Row style={{ alignItems: "center", margin: "10px 0" }}>
        <Col span={2}>昵称:</Col>
        <Col span={22}>
          <Input
            value={editItem.nickname}
            onChange={(e) =>
              setEditItem({
                // 保存原数据
                ...editItem,
                // 修改指定数据
                nickname: e.target.value,
              })
            }
          ></Input>
        </Col>
      </Row>
      <Row style={{ alignItems: "center", margin: "10px 0" }}>
        <Col span={2}>电话:</Col>
        <Col span={22}>
          <Input
            value={editItem.tel}
            onChange={(e) =>
              setEditItem({
                // 保存原数据
                ...editItem,
                // 修改指定数据
                tel: +e.target.value,
              })
            }
          ></Input>
        </Col>
      </Row>
      <Row style={{ alignItems: "center", margin: "10px 0" }}>
        <Col span={2}>地址:</Col>
        <Col span={22}>
          <Input
            value={editItem.address}
            onChange={(e) =>
              setEditItem({
                // 保存原数据
                ...editItem,
                // 修改指定数据
                address: e.target.value,
              })
            }
          ></Input>
        </Col>
      </Row>
      <Row style={{ alignItems: "center", margin: "10px 0" }}>
        <Col span={2}>性别:</Col>
        <Col span={22}>
          <Input
            value={editItem.sex}
            onChange={(e) =>
              setEditItem({
                // 保存原数据
                ...editItem,
                // 修改指定数据
                sex: e.target.value,
              })
            }
          ></Input>
        </Col>
      </Row>
      <Row style={{ alignItems: "center", margin: "10px 0" }}>
        <Col span={2}>状态:</Col>
        <Col span={22}>
          <Select
            value={editItem.type}
            style={{ width: 120 }}
            onChange={(value) =>
              setEditItem({
                ...editItem,
                type: value,
              })
            }
            options={[
              { value: "未发货", label: "未发货" },
              { value: "已发货", label: "已发货" },
              { value: "正在派件", label: "正在派件" },
              { value: "已收货", label: "已收货" },
              { value: "已签收", label: "已签收" },
              { value: "已拒签", label: "已拒签" },
            ]}
          />
        </Col>
      </Row>  <Row style={{ alignItems: "center", margin: "10px 0" }}>
        <Col span={2}></Col>
        <Col span={22}>
          <Button type="primary" block size="large" onClick={() => handleAdd()}>添加</Button>
        </Col>
      </Row>
    </div>
  );
};

export default Home;
